/*初始化样式*/
html{margin:0;padding:0;border:0;}
body,div,span,object,iframe,h1,h2,h3,h4,p,blockquote,pre,a,address,code,b,em,img,
dl,dt,dd,ol,ul,li,fieldset,form,label,
header,hgroup,nav,section
{margin:0;padding:0;border:0;}
body{background:#fff;color:#666;position:relative;font:12px/1.5 Microsoft YaHei,arial,宋体,sans-serif;vertical-align:baseline;width:100%;overflow-x:hidden;}
a{text-decoration:none;outline:none;}
/*a:link{color:#666;}*/
a:visited{color:#666;}
a:hover,a:active,a:focus{color:#0C64B3;text-decoration:none;outline:none;}

input{padding:0;margin:0;font-family:'Microsoft YaHei';}
img{border:none;background:none;vertical-align:middle;}
ul,ol,li{list-style-type:none;}
select,input,img,select{vertical-align:middle;}
table{border-collapse:collapse;border-spacing:0}
table, th, td {vertical-align: middle}
.clearfix:after{content: ".";display: block;height: 0;clear: both;overflow: hidden;visibility: hidden;}
.clearfix{zoom:1}
.clearboth{height:0px;line-height:0px;overflow:hidden;clear:both;font-size:0px;}

h1,h2,h3,h4{font-size:12px;font-weight:bold;}
hr {border: 0;border-top:1px solid #ccc;height:0;}
dt{font-weight: normal;}

/*----- Common css ------*/
.fl{float:left;}
.fr{float:right;}
.di{_display:inline;}
.fwn{font-weight:normal;}
.dib{*display:inline;_zoom:1;_display:inline;_font-size:0px;}


/**/
.box3{display: flex;background: rgba(37, 38, 40, 1);}
.pleft{width: 360px;padding: 50px;background:#195597;-webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;}
.pleft h3{font-size: 38px;color: #fff;font-weight: normal;}
.pleft h3 p{display: block;font-size:16px;line-height: 2;margin-top: 20px;}
.xian{height: 4px;background:rgba(255,255,255,.5);width: 50px;margin-top: 20px;}
.psort {margin-top: 50px;}
.psort li a{display: block;position: relative;color: #f1f1f1; height: 46px; line-height: 46px;font-size: 16px;transition: all .5s ease;border-bottom: 1px dashed rgba(232, 232, 232, 0.4);padding-left: 20px;}
.psort li a::before {
    content: '';
    display: block;
    width: 3px;
    height: 46px;
    background-color: #04abf4;
    position: absolute;
    left: 0px;
    top: 0px;
    opacity: 0;
    transition: all .5s ease;
}
.psort li a:hover{background-color: #f5f8fa;color: #015696;}
.psort li a:hover::before{opacity: 1;}
.pmore a{display: block;margin-top: 50px;text-align: center; max-width: 210px;border: 1px solid rgba(232, 232, 232, 0.4);position: relative;overflow: hidden;}
.pmore a:before {
    content: '';
    width: 0px;
    height: 100%;
    background: rgba(232, 232, 232, 0.4);
    position: absolute;
    top: 0px;
    left: 0px;
    transition-duration: .5s;
}
.pmore a .w1{
        color: rgba(232, 232, 232, 0.8);
    line-height: 50px;
    position: relative;
    z-index: 1;
    font-size: 14px;
    transition-duration: .5s;
}
.pmore a:hover:before {width: 100%;}
.search {
    position: absolute;
    left: 10px;
    top: 10px;
    display: block;
    width: 20px;
    height: 20px;
    color: #fff;
}
.proLi{position: relative;float: left;width: calc(100% / 4);padding:16px;}
.pright{margin: 16px 0;padding-left: 30px;    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;}
.proLink{position: relative;display: block;width: 100%;height: 100%;overflow: hidden;background: rgba(255, 255, 255, 0.1);transition: all 0.5s ease;border: 1px solid rgba(243,243,243,0.3);}
.proLi:hover .proLink{box-shadow: 0 0 20px rgba(255,255,255,0.2);}
.proLi .proTitle{
    position: relative;
    text-align: center;
    padding: 0 20%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff;
    font-size: 16px;
    font-weight: normal;
    height: 70px;
    line-height: 70px;
    transition: all .5s ease;
}
.proImgBox{
    position: relative;
    width: 100%;
    overflow: hidden;
    text-align: center;
}

.proImgBox img{
    width: 90%;
    margin: 0 auto;
    transition: all .8s ease;
}
.lookMore{
        width: 100%;
    text-align: center;
    font-size: 16px;
    color: #3b3c3e;
    font-family: Oswald;
}
 .iconfont {
    transition: .5s;
}
.search img{display: block;}
.proTitle::before {
    content: '';
    position: absolute;
    left: -170px;
    top: -70px;
    width: 140px;
    height: 140px;
    background-color: #015696;
    transform: rotate(45deg);
    transition: all .5s ease;
}
.proLi:hover .proTitle::before {
    left: -100px;
}
.proLi:hover .lookMore .iconfont {
    margin-left: 5px;
}
.proLink::after {
    content: '';
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 0px;
    height: 2px;
    background-color: #015696;
    transition: all .5s ease;
}
.proLi:hover .proLink::after {
    width: 100%;
}

@media only screen and (max-width: 1280px) and (min-width: 1025px){
.proLi {
    float: left;
    width: calc(100% / 3);
    margin: 0px;
    padding: 10px;
}
}


@media only screen and (max-width: 1024px) and (min-width: 769px){
.proLi {
    width: 50%;
}

}


@media only screen and (max-width: 768px){
.pleft {
    display: none;
}
.pright {
    background: url(../images/hc_p_bg.jpg) #025597 no-repeat center bottom;margin: 0;padding:16px 0;
}
.box3{padding:0;}
.proLi {
    width: 50%;
    float: left;
    padding: 5px;
}
.proLi .proTitle{
    font-size: 14px;
    height: 40px;
    line-height: 40px;
}
.lookMore {
    padding: 0.875rem;
    font-size: 12px;
    color: #fff;
}



}







/*手机底部*/
@media (max-width:768px){
 .db{display:block!important;}
}


.dbb{height:50px;}

